import React from "react";
import {StoreManager} from "@/stores";
import {observer} from "mobx-react/index";
import {CheckBox, CheckBoxGroupStore} from "@/components/CheckBox";
import * as PropTypes from "prop-types";
import classNames from 'classnames'

@observer
export class CheckBoxGroup extends React.Component {
    static contextTypes = {
        formSettings: PropTypes.object
    }

    static propTypes = {
        name: PropTypes.oneOfType([PropTypes.string, PropTypes.symbol]).isRequired,
        inline: PropTypes.bool,
        options: PropTypes.arrayOf(PropTypes.object)
    }
    static defaultProps = {
        inline: true
    }

    constructor(props, context) {
        super(props, context)
        const parent = context.formSettings && context.formSettings.store
        this.store = StoreManager.create(new CheckBoxGroupStore(props), parent)
    }

    componentWillUnmount() {
        StoreManager.delete(this.store)
    }

    render() {
        const {options, className, inline} = this.props
        return (
            <div className={classNames('checkbox-group', {inline}, className)}>
                {options.map(option =>
                    <CheckBox parentStore={this.store}
                              key={option.value}
                              name={Symbol('CheckBox')}
                              label={option.label}
                              value={option.value}/>)
                }
            </div>)
    }
}
